<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>vue-el测试</title>
    <th:block th:replace="~{commons/commons2::head}"/>
    <script src="/static/js/vue/vue.js"></script>
    <script src="/static/js/head_jq.js"></script>
    <script src="/static/js/page.min.js"></script>

</head>
<style>
    .table-responsive table{
        text-align: center;
    }
    .table-responsive table th{
        cursor: pointer;
        text-align: center;
    }
    .table-responsive table tbody td{
        height: 35px;
        line-height: 35px;
    }
    .search{
        display: inline-block;
        margin-left: 15px;
    }
    .form-group{
        margin-bottom: 0.5rem !important;
    }
</style>
<body>

<div id="app">
<!--    <div th:replace="~{commons/commons2::sidebar(~div)}">

        <p>123</p>

    </div>-->
    <div th:replace="~{commons/commons2::sidebar(~{::section})}">

        <section id="container">
            <div class="container-fluid">

                <!--表格-->
                <div class="container" style="margin-top: 20px">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <span class="lead">用户信息</span>

                                    <form class="form-inline my-2 my-lg-0 search">
                                        <input class="form-control mr-sm-2" type="search" v-model="keyWord" name="keyWord" id="keyWord" placeholder="编号|姓名">
                                        <button class="btn btn-outline-success my-2 my-sm-0" id="search" type="button" @click="search">搜索</button>
                                    </form>

                                    <div style="float: right;">
                                        <a href="/user/userInfo" class="btn btn-outline-primary" >
                                            全部用户
                                        </a>
                                    </div>
                                </div>
                                <div class="card-body" style="padding: 0 15px;line-height: 40px;">
                                    <span>这里显示了一些学生的基本信息</span>
                                </div>
                                <div class="table-responsive">
                                    <table class="table table-hover table-striped" style="margin-bottom: 0">
                                        <thead>
                                        <tr>
                                            <th>编号</th>
                                            <th>姓名</th>
                                            <th>密码</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="userInfo">
                                        <tr v-for="(item,index) in jsonData.list">
                                            <td>{{item.id}}</td>
                                            <td>{{item.username}}</td>
                                            <td>{{item.password}}</td>
                                            <td>
                                                <a class="btn btn-outline-primary update" @click="update(item.id,index,$event)" data-toggle="modal" data-target="#userInfoModal" >
                                                    修改
                                                </a>
                                                <a class="btn btn-outline-danger del" @click="del(item.id,index)" data-toggle="modal" data-target="#myModal" title="谨慎删除！">
                                                    删除
                                                </a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 col-sm-6">
                        <nav class="nav-fenye">
                            <ul class="pagination" id="pagination">
                                <!--通过ajax动态生成-->
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>

        </section>


    </div>

    <!--
    <div th:replace="~{commons/commons2::topNav}"></div>
-->


</div>

<script>

    let vm = new Vue({
        el : '#container',
        data : {
            keyWord : '',
            id : '',
            username : '',
            password : '',
            jsonData : '',
            delID : 0,
            delIndex : 0,
            updateIndex : 0,
        },
        methods : {
            initData(){//初始化数据
                axios({
                    method : "GET",
                    url:"/user/json/",
                }).then((response)=>{
                    console.log(response.data);
                    this.jsonData = response.data;
                    this.pagination(this.jsonData.totalPage,null)
                }).catch(function (error) {
                    console.log(error);
                });
            },
            pagination(totalPage,keyWord){//生成页码列表
                $("#pagination").pagination({
                    pages: totalPage, //总页数
                    edges: 1, //默认访问
                    cssStyle: '', //写入自定义css
                    displayedPages: 5, //显示几个
                    onPageClick: (pageNumber, event)=> {
                        //点击时调用
                        console.log(pageNumber);
                        this.getNewPageByAjax(keyWord,pageNumber)
                    },
                    onInit: (pageNumber)=> {
                        //刷新时或初始化调用
                        if (pageNumber === '1'){
                            console.log("初始化加载用户数据")
                        }else{
                            this.getNewPageByAjax(null,pageNumber)
                        }
                    }
                });
            },
            search(){//关键字搜索
                if (this.keyWord === ""){
                    Qmsg.info("搜索关键字不能为空",{position:'center'});return;
                }
                axios({
                    method : "GET",
                    url:"/user/search/" + this.keyWord,
                }).then((response)=>{
                    if (response.data !== ""){
                        console.log(response.data);
                        this.jsonData = response.data
                        this.pagination(this.jsonData.totalPage,this.keyWord)
                    }else{
                        Qmsg.warning("没有找到你要搜索的数据，请尝试更改搜索条件",{autoClose:false, position:'center'});
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            getNewPageByAjax(keyWord,pageNumber){//ajax获取新页面信息
                if (keyWord === null){
                    axios({
                        method : "GET",
                        url:"/user/json/" + pageNumber,
                    }).then((response)=>{
                        this.jsonData = response.data
                    }).catch(function (error) {
                        console.log(error);
                    });
                }else{
                    axios({
                        method : "GET",
                        url: "/user/search/" + keyWord + "/" + pageNumber,
                    }).then((response)=>{
                        this.jsonData = response.data
                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            },
            update(uid,index,el){//获得要更新的信息
                console.log(el)
                this.updateIndex = index
                axios({
                    method : "GET",
                    url:"/user/update/" + uid,
                }).then((response)=>{
                    console.log(response.data);
                    this.id = response.data.id;
                    this.username = response.data.username;
                    this.password = response.data.password;

                }).catch(function (error) {
                    console.log(error);
                });
            },
            confirmUpdate(){//确认更新，真正的更新方法
                console.log(this.password);
                axios({
                    method : "POST",
                    url:"/user/update/",
                    params: {
                        id : this.id,
                        username : this.username,
                        password : this.password,
                    },
                    headers:{
                        'Content-type': 'application/x-www-form-urlencoded'
                    },
                }).then((response)=>{
                    if (response.data === true){
                        this.jsonData.list[this.updateIndex].password = this.password
                        Qmsg.success("修改成功",{position:'center'});
                    }
                }).catch(function (error) {
                    Qmsg.info("修改失败",{position:'center'});
                });
            },
            del(id,index){//获得删除所需的信息
                this.delID = id;
                this.delIndex = index;
            },
            confirmDel(){//删除方法
                console.log(this.password);
                axios({
                    method : "GET",
                    url:"/user/del/" + this.delID,
                }).then((response)=>{
                    if (response.data === true){
                        this.jsonData.list.splice(this.delIndex,1)
                        Qmsg.success("删除成功",{position:'center'});
                    }
                }).catch(function (error) {
                    Qmsg.info("删除失败",{position:'center'});
                });
            },
        },
        beforeMount (){//初始化数据
            console.log("页面挂载之前")
            /*消息弹窗全局配置*/
            Qmsg.config({
                showClose:true,
                timeout:2000,
                autoClose:true
            })
            this.initData()
        },
        mounted(){
            console.log("页面挂载之后")
        },
    });

</script>

</body>
</html>
